<meta charset="UTF-8" />
<title>字体遍历</title>

<select id="the_font"></select>
<br />
<br />
内容：<input type="text" id="input_content" />
<br />
<br />
大小：<input type="text" id="input_size" />
<br />
<br />
宽度：<input type="text" id="input_weight" />
<br />
<br />
颜色：<input type="text" id="input_color" />
<br />
<br />
背景颜色：<input type="text" id="input_background_color" />
<br />
<br />
<button id="btn_download" onclick="download_image()">下载图片</button>
<br />
<br />
<canvas id="canvas"></canvas>
<br />
<br />
数字1有下划线
全部<input type="radio" name="one_has_underline" value="null" checked>
有<input type="radio" name="one_has_underline" value="true">
没有<input type="radio" name="one_has_underline" value="false">
<br />
<br />
<table id="show_table" border="1" cellspacing="0" cellpadding="0" style="display: inline-block"></table>

<style>
	body {
		text-align: center;
	}

	#show_table td {
		cursor: pointer;
		padding: 3px 6px;
	}
</style>

<script>
	const font_list = [
		{ name: 'System', },
		{ name: 'Terminal', },
		{ name: 'Fixedsys', },
		{ name: 'Modern', },
		{ name: 'Roman', },
		{ name: 'Script', },
		{ name: 'Courier', one_has_underline: true },
		{ name: 'MS Serif', one_has_underline: true },
		{ name: 'MS Sans Serif', },
		{ name: 'Small Fonts', },
		{ name: 'TeamViewer15', },
		{ name: 'ADMUI3Lg', },
		{ name: 'ADMUI3Sm', },
		{ name: 'Arial', },
		{ name: 'Arial Black', },
		{ name: 'Bahnschrift Light', },
		{ name: 'Bahnschrift SemiLight', },
		{ name: 'Bahnschrift', },
		{ name: 'Bahnschrift SemiBold', },
		{ name: 'Bahnschrift Light SemiCondensed', },
		{ name: 'Bahnschrift SemiLight SemiConde', },
		{ name: 'Bahnschrift SemiCondensed', },
		{ name: 'Bahnschrift SemiBold SemiConden', },
		{ name: 'Bahnschrift Light Condensed', },
		{ name: 'Bahnschrift SemiLight Condensed', },
		{ name: 'Bahnschrift Condensed', },
		{ name: 'Bahnschrift SemiBold Condensed', },
		{ name: 'Calibri', one_has_underline: true },
		{ name: 'Calibri Light', one_has_underline: true },
		{ name: 'Cambria', one_has_underline: true },
		{ name: 'Cambria Math', one_has_underline: true },
		{ name: 'Candara', },
		{ name: 'Candara Light', },
		{ name: 'Comic Sans MS', one_has_underline: true },
		{ name: 'Consolas', one_has_underline: true },
		{ name: 'Constantia', one_has_underline: true },
		{ name: 'Corbel', one_has_underline: true },
		{ name: 'Corbel Light', one_has_underline: true },
		{ name: 'Courier New', one_has_underline: true },
		{ name: 'Ebrima', },
		{ name: 'Franklin Gothic Medium', one_has_underline: true },
		{ name: 'Gabriola', },
		{ name: 'Gadugi', },
		{ name: 'Georgia', one_has_underline: true },
		{ name: 'Impact', },
		{ name: 'Ink Free', },
		{ name: 'Javanese Text', one_has_underline: true },
		{ name: 'Leelawadee UI', },
		{ name: 'Leelawadee UI Semilight', },
		{ name: 'Lucida Console', one_has_underline: true },
		{ name: 'Lucida Sans Unicode', },
		{ name: 'Malgun Gothic', },
		{ name: 'Malgun Gothic Semilight', },
		{ name: 'Microsoft Himalaya', one_has_underline: true },
		{ name: 'Microsoft JhengHei', one_has_underline: true },
		{ name: 'Microsoft JhengHei UI', },
		{ name: 'Microsoft JhengHei Light', },
		{ name: 'Microsoft JhengHei UI Light', },
		{ name: 'Microsoft New Tai Lue', one_has_underline: true },
		{ name: 'Microsoft PhagsPa', one_has_underline: true },
		{ name: 'Microsoft Sans Serif', },
		{ name: 'Microsoft Tai Le', one_has_underline: true },
		{ name: '微软雅黑', },
		{ name: 'Microsoft YaHei UI', },
		{ name: '微软雅黑 Light', },
		{ name: 'Microsoft YaHei UI Light', },
		{ name: 'Microsoft Yi Baiti', },
		{ name: 'MingLiU-ExtB', one_has_underline: true },
		{ name: 'PMingLiU-ExtB', one_has_underline: true },
		{ name: 'MingLiU_HKSCS-ExtB', one_has_underline: true },
		{ name: 'Mongolian Baiti', one_has_underline: true },
		{ name: 'MS Gothic', },
		{ name: 'MS UI Gothic', },
		{ name: 'MS PGothic', },
		{ name: 'MV Boli', },
		{ name: 'Myanmar Text', one_has_underline: true },
		{ name: 'Nirmala UI', },
		{ name: 'Nirmala UI Semilight', },
		{ name: 'Palatino Linotype', one_has_underline: true },
		{ name: 'Segoe MDL2 Assets', },
		{ name: 'Segoe Print', one_has_underline: true },
		{ name: 'Segoe Script', one_has_underline: true },
		{ name: 'Segoe UI', },
		{ name: 'Segoe UI Black', },
		{ name: 'Segoe UI Emoji', },
		{ name: 'Segoe UI Historic', },
		{ name: 'Segoe UI Light', },
		{ name: 'Segoe UI Semibold', },
		{ name: 'Segoe UI Semilight', },
		{ name: 'Segoe UI Symbol', },
		{ name: '宋体', one_has_underline: true },
		{ name: '新宋体', one_has_underline: true },
		{ name: 'SimSun-ExtB', one_has_underline: true },
		{ name: 'Sitka Small', one_has_underline: true },
		{ name: 'Sitka Text', one_has_underline: true },
		{ name: 'Sitka Subheading', one_has_underline: true },
		{ name: 'Sitka Heading', one_has_underline: true },
		{ name: 'Sitka Display', one_has_underline: true },
		{ name: 'Sitka Banner', one_has_underline: true },
		{ name: 'Sylfaen', one_has_underline: true },
		{ name: 'Symbol', one_has_underline: true },
		{ name: 'Tahoma', one_has_underline: true },
		{ name: 'Times New Roman', one_has_underline: true },
		{ name: 'Trebuchet MS', },
		{ name: 'Verdana', one_has_underline: true },
		{ name: 'Yu Gothic', one_has_underline: true },
		{ name: 'Yu Gothic UI', },
		{ name: 'Yu Gothic UI Semibold', },
		{ name: 'Yu Gothic Light', },
		{ name: 'Yu Gothic UI Light', },
		{ name: 'Yu Gothic Medium', one_has_underline: true },
		{ name: 'Yu Gothic UI Semilight', },
		{ name: '等线', one_has_underline: true },
		{ name: '等线 Light', one_has_underline: true },
		{ name: '仿宋', one_has_underline: true },
		{ name: '楷体', },
		{ name: '黑体', },
		{ name: 'HoloLens MDL2 Assets', },
		{ name: 'Haettenschweiler', },
		{ name: 'MS  LineDraw', },
		{ name: 'Lucida Sans Typewriter', one_has_underline: true },
		{ name: 'DejaVu Sans Mono', },
		{ name: '方正舒体', },
		{ name: '方正姚体', },
		{ name: '隶书', one_has_underline: true },
		{ name: '华文彩云', },
		{ name: '华文仿宋', one_has_underline: true },
		{ name: '华文琥珀', },
		{ name: '华文楷体', one_has_underline: true },
		{ name: '华文隶书', one_has_underline: true },
		{ name: '华文宋体', one_has_underline: true },
		{ name: '华文细黑', },
		{ name: '华文行楷', },
		{ name: '华文新魏', },
		{ name: '华文中宋', },
		{ name: '幼圆', one_has_underline: true },
		{ name: 'Century', one_has_underline: true },
		{ name: 'Wingdings 2', },
	];

	/** @type {HTMLCanvasElement} */
	const canvas = document.querySelector("#canvas");
	const _2d = canvas.getContext("2d");

	font_list.forEach(function (foun, i) {
		the_font.options[i] = new Option(foun.name, foun.name);
	});

	const array_split = function (arr, count) {
		const length = Math.ceil(arr.length / count);
		const ret = [];
		for (let i = 0; i < length; i++) {
			ret.push(arr.slice(count * i, count * (i + 1)));
		}
		return ret;
	};

	const getRadioNamesValue = function (el_name) {
		const els = [...document.getElementsByName("one_has_underline")].filter(el => el.checked);
		return els.length === 0 ? undefined : els[0].value;
	};

	show_table.innerHTML = array_split(font_list.filter(
		(font) => {
			const one_has_underline = getRadioNamesValue("one_has_underline");
			return true;
		}
	), 2)
		.map(
			(font_list) =>
				`<tr class="show_table_tr">${font_list
					.map(
						(font) =>
							`<td onclick='td_click("${font.name}")'>${font.name}</td><td id="show_table_content" style="font-family:${font.name};"></td>`
					)
					.join('')}</tr>`
		)
		.join('');

	const show_table_contents = document.querySelectorAll('#show_table_content');
	const show_table_trs = document.querySelectorAll('.show_table_tr');

	the_font.oninput = function () {
		refresh_font();
		refresh();
	};

	input_content.oninput = function () {
		refresh_content();
		refresh();
	};

	input_size.oninput = function () {
		refresh_size();
		refresh();
	};

	input_weight.oninput = function () {
		refresh_weight();
		refresh();
	};

	input_color.oninput = function () {
		refresh_font_color();
		refresh();
	};

	input_background_color.oninput = function () {
		refresh_background_color();
		refresh();
	};

	document.getElementsByName("one_has_underline").forEach(el => {
		el.oninput = function () {
			refresh_one_has_underline();
			refresh();
		};
	});

	const td_click = function (font) {
		the_font.value = font;
		refresh_font();
		refresh();
	};

	const checkFontStyle = function (value, fontValue) {
		return value === "null" ? true : (value === "true" ? fontValue : !fontValue);
	};

	let font_family = the_font.value;
	const refresh_font = function () {
		font_family = the_font.value;
	};

	let font_size = input_size.value;
	const refresh_size = function () {
		font_size = input_size.value;
		show_table.style.fontSize = font_size;
	};

	let font_weight = input_weight.value;
	const refresh_weight = function () {
		font_weight = input_weight.value;
		show_table.style.fontWeight = font_weight;
	};

	let font_color = input_color.value;
	const refresh_font_color = function () {
		font_color = input_color.value;
		show_table.style.color = font_color;
	};

	let background_color = input_background_color.value;
	const refresh_background_color = function () {
		background_color = input_background_color.value;
		document.body.style.backgroundColor = background_color;
	};

	let one_has_underline = getRadioNamesValue("one_has_underline");
	const refresh_one_has_underline = function () {
		one_has_underline = getRadioNamesValue("one_has_underline");
		show_table_contents.forEach((node, i) => {
			const font = font_list[i];
			const checkList = [
				checkFontStyle(one_has_underline, font.one_has_underline),
			];
			node.style.visibility = checkList.every(judge => judge) ? "visible" : "hidden";
			node.innerHTML = input_content.value;
		});
	};

	let content = input_content.value;
	const refresh_content = function () {
		content = input_content.value;
		show_table_contents.forEach((node, i) => {
			node.innerHTML = content;
		});
	};

	const refresh = function () {
		const font_size_str = font_size || "16px";
		canvas.height = parseFloat(font_size_str) + 10;
		_2d.font = `${font_weight} ${font_size_str} ${font_family}`;
		canvas.width = _2d.measureText(content).width + 20;
		_2d.clearRect(0, 0, canvas.width, canvas.height);
		_2d.font = `${font_weight} ${font_size_str} ${font_family}`;
		_2d.fillStyle = font_color;
		_2d.textBaseline = "top";
		_2d.fillText(content, 10, 10);
	};

	const download_image = function () {
		const imageURL = canvas.toDataURL("image/png");
		const a = document.createElement("a");
		a.href = imageURL;
		a.download = "download_image.png";
		a.click();
	};

	refresh_font();
	refresh_size();
	refresh_weight();
	refresh_font_color();
	refresh_background_color();
	refresh_one_has_underline();
	refresh_content();
	refresh();
</script>